<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page contentType="text/html;charset=UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<head>
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="format-detection" content="telephone=no">
<meta charset="UTF-8">

<meta name="description" content="Violate Responsive Admin Template">
<meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">

<title>视频资源</title>

<!-- CSS -->
<link href="${pageContext.request.contextPath}/admin/css/bootstrap.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/animate.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/font-awesome.min.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/form.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/calendar.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/media-player.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/styl.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/icons.css" rel="stylesheet">
<link href="${pageContext.request.contextPath}/admin/css/generics.css" rel="stylesheet">
 <link rel="stylesheet" href="${pageContext.request.contextPath}/admin/videoassets/css/blueimp-gallery.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/admin/videoassets/css/blueimp-gallery-indicator.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/admin/videoassets/css/blueimp-gallery-video.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/admin/videoassets/css/demo.css"> 
 <link href="${pageContext.request.contextPath}/admin/video/play5.css" rel="stylesheet" type="text/css">
 <script src="${pageContext.request.contextPath}/admin/video/jquery-1.7.2.min.js"></script>
 <script src="${pageContext.request.contextPath}/admin/video/zPlayer.js"></script>
  <link href="${pageContext.request.contextPath}/admin/jplayer/css/jplayer.blue.monday.min.css" rel="stylesheet" type="text/css" />
   <script src="${pageContext.request.contextPath}/admin/assets/js/jquery.min.js"></script>
</head>
<body id="skin-blur-violate">
	<header id="header" class="media">
		<a href="" id="menu-toggle"></a>


	</header>


	<section class="p-relative" role="main">

		<!-- Sidebar -->
		<aside id="sidebar">



			<!-- Side Menu -->
			<ul class="list-unstyled side-menu">
				<%-- <li><a class="sa-side-home"
					href="${pageContext.request.contextPath}/admin/index111.jsp"> <span
						class="menu-item">主页</span> </a></li> --%>
				<%-- <li><a class="sa-side-typography"
					href="${pageContext.request.contextPath}/music/listadmin"> <span
						class="menu-item">音乐</span> </a></li> --%>
				<li class="active"><a class="sa-side-widget"
					href="${pageContext.request.contextPath}/video/listadmin1"> <span
						class="menu-item">视频</span> </a></li>
			</ul>
		</aside>


		<section id="content" class="container">


			<!-- Breadcrumb -->
			<ol class="breadcrumb hidden-xs">
				 <a type="button" class="btn btn-xs" href="${pageContext.request.contextPath}/system/user/login">退出登陆</a>
                   <!--  <input type="button" name="Submit" onclick="javascript:history.back(-1);" value="返回上一页"> -->
                      <button class="btn btn-xs" onClick="javascript :history.go(-1);">返回上一页</button>
			</ol>

			<h4 class="page-title">TABLES</h4>



			<div class="col-md-5 col-sm-12 col-xs-12">

				<!-- Deafult Table -->
				<div class="block-area" id="defaultStyle">
					<h3 class="block-title">视频信息</h3>


					<table class="table tile">
						<thead>
							<tr>
								<th>编号</th>
								<th>视频名</th>
								<!-- <th>上映时间</th> -->
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
						<c:set var="i" value="0" />
							<c:forEach items="${list }" var="m">
								<tr>
									<td>${m.id}</td>
									<td>${m.videoName}</td>
									<%-- <td>${m.singer}</td> --%>
									<td><%-- <a onclick="a()" href="${pageContext.request.contextPath}/${m.urlvideo}">播放 </a> --%>
									         <c:set var="i" value="${i+1}" />
								<%-- 	<a onclick="dianji('${pageContext.request.contextPath}/${m.urlvideo}')" id="aa">播放 </a> --%>
										<%-- <a  href="JavaScript:gallery.slide(${i-1}, 0);">选择</a> --%>
										<a href="${pageContext.request.contextPath}/system/download?fileName=${m.urlvideo}">下载</a>
									<%--  <a href="${pageContext.request.contextPath}/${m.urlvideo}">下载</a></td> --%>
								</tr>
							</c:forEach>
						</tbody>
					</table>
					
					共${requestScope.page.totalSize}条记录&nbsp;&nbsp;<span class="tooltip"></span>
               <div class="media text-center">
					<ul class="pagination">
						</a>
						</li>
						<li>${requestScope.pageString}
						</li>
						</a>
						</li>
					</ul>
				</div>
				
				
	<input type="hidden" value="${requestScope.page.totalPage}" id="totalPage"/> 
    <script type="text/javascript">
		$(document).ready(function(){
			$('.page_s').on('click',function(){
				var count=$(this).attr('lang');
				if(count <= parseInt($('#totalPage').val()) && count >= 1){
				window.location.href="${pageContext.request.contextPath}/video/listadmin?currentPage="+count;
				}
			});
			
			
		});
	
	</script>
					
				</div>

			</div>


			<div class="col-md-7 col-sm-12 col-xs-12">

  <div id="jp_container_1" class="jp-video jp-video-270p" role="application" aria-label="media player">
	<div class="jp-type-playlist">
		<div id="jquery_jplayer_1" class="jp-jplayer"></div>
		<div class="jp-gui">
			<div class="jp-video-play">
				<button class="jp-video-play-icon" role="button" tabindex="0">play</button>
			</div>
			<div class="jp-interface">
				<div class="jp-progress">
					<div class="jp-seek-bar">
						<div class="jp-play-bar"></div>
					</div>
				</div>
				<div class="jp-current-time" role="timer" aria-label="time">&nbsp;</div>
				<div class="jp-duration" role="timer" aria-label="duration">&nbsp;</div>
				<div class="jp-controls-holder">
					<div class="jp-controls">
						<button class="jp-previous" role="button" tabindex="0">previous</button>
						<button class="jp-play" role="button" tabindex="0">play</button>
						<button class="jp-next" role="button" tabindex="0">next</button>
						<button class="jp-stop" role="button" tabindex="0">stop</button>
					</div>
					<div class="jp-volume-controls">
						<button class="jp-mute" role="button" tabindex="0">mute</button>
						<button class="jp-volume-max" role="button" tabindex="0">max volume</button>
						<div class="jp-volume-bar">
							<div class="jp-volume-bar-value"></div>
						</div>
					</div>
					<div class="jp-toggles">
						<button class="jp-repeat" role="button" tabindex="0">repeat</button>
						<button class="jp-shuffle" role="button" tabindex="0">shuffle</button>
						<button class="jp-full-screen" role="button" tabindex="0">full screen</button>
					</div>
				</div>
				<div class="jp-details">
					<div class="jp-title" aria-label="title">&nbsp;</div>
				</div>
			</div>
		</div>
		<div class="jp-playlist">
			<ul>
				<!-- The method Playlist.displayPlaylist() uses this unordered list -->
				<li>&nbsp;</li>
			</ul>
		</div>
		<div class="jp-no-solution">
			<span>不支持</span>
			
		</div>
	</div>
</div>
           

			 <!-- 	The Gallery as inline carousel, can be positioned anywhere on the page -->
				<!-- <div id="blueimp-video-carousel" class="blueimp-gallery blueimp-gallery-controls blueimp-gallery-carousel">
					<div class="slides"></div>
					<h3 class="title"></h3>
					<a class="prev">‹</a> 
					<a class="next">›</a>
					<a class="play-pause"></a>
				</div>   -->
				
				
			<!-- 	<script>
				function dianji(path){
				document.getElementById('b').src=path;
				} -->
				<!-- 
                $(function(){
				  new zPlayer(700,".zPlayer");
				  });
					
					$("#aa").click(function(){
					changeStatus();
                    
					});  */
					
				/* 	function a(a){
					  document.getElementById("#b").src="";
					} 		 -->
			 <!--  </script> -->
			  
			 <!--  播放器 -->
                 <%-- <div id="myVideo" class="zPlayer">
		<video preload="auto">
			<!--<source src="movie5.mp4">-->
			<source id="b" src="">
		</video>
		<div class="ui-play"><span></span></div>
        <div class="proLines">
            <div class="arial currentTime">00:00:00</div>
            <div class="line">
                <div class="isPlayLine">
                    <div class="currentCircle"></div>
                </div>
            </div>
            <div class="arial allTime"></div>
        </div>
        <div class="playBars">
            <div class="startBar"><img src="${pageContext.request.contextPath}/admin/video/images/stop.jpg" border="0"></div>
            <div class="voiceContent">
                <div class="voice">
                    <img src="${pageContext.request.contextPath}/admin/video/images/voice.jpg" id="voiceImg" border="0">
                </div>
                <div class="voiceline">
                    <div class="voicekuai"></div>
                </div>
            </div>
			<div class="playTxt" style="color: #000000;">我的播放器，我做主</div>
			<div class="fullBtn"><img src="${pageContext.request.contextPath}/admin/video/images/full.png" width="17" height="15" border="0"></div>
        </div>
    </div>
                

			</div> --%>


		</section>
	</section>

	 <!-- Javascript Libraries -->
        <!-- jQuery -->
        <script src="${pageContext.request.contextPath}/admin/js/jquery.min.js"></script> <!-- jQuery Library -->
        
        <!-- Bootstrap -->
        <script src="${pageContext.request.contextPath}/admin/js/bootstrap.min.js"></script>
        
        <!-- UX -->
        <script src="${pageContext.request.contextPath}/admin/js/scroll.min.js"></script> <!-- Custom Scrollbar -->
        
        <!-- Other -->
        <script src="${pageContext.request.contextPath}/admin/js/calendar.min.js"></script> <!-- Calendar -->
        <script src="${pageContext.request.contextPath}/admin/js/feeds.min.js"></script> <!-- News Feeds -->
        
        
        <!-- All JS functions -->
        <script src="${pageContext.request.contextPath}/admin/js/functions.js"></script>

 		

	
	<!--  <script>
		var gallery =  blueimp.Gallery(
						[
						 <c:forEach items="${list}" var="m">
								{
									title : "${m.videoName}",
									href : "${pageContext.request.contextPath}/${m.urlvideo}",
									type : 'video/webm',
									poster : ''
								},
								 </c:forEach>
								 ], {
							container : '#blueimp-video-carousel',
							carousel : true
						});
				
	</script>  -->

	 <script type="text/javascript" src="${pageContext.request.contextPath}/admin/jplayer/js/jquery.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/admin/jplayer/js/jquery.jplayer.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/admin/jplayer/js/jplayer.playlist.min.js"></script>
	
	<script type="text/javascript">
	$(document).ready(function(){
	new jPlayerPlaylist({
		jPlayer: "#jquery_jplayer_1",
		cssSelectorAncestor: "#jp_container_1"
	}, [
	 <c:forEach items="${list}" var="m">
		{
			title:"${m.videoName}",
			artist:"",
			/* free:true, */
			m4v:"${pageContext.request.contextPath}/${m.urlvideo}",
		},
		 </c:forEach>
		], {
		swfPath: "js/jplayer",
		supplied: "webmv, ogv, m4v",
		useStateClassSkin: true,
		autoBlur: false,
		smoothPlayBar: true,
		keyEnabled: true
    	});
	});	
</script>
</body>
</html>

